<script setup lang="ts">
import { ref, reactive } from "vue"
import { formatDateTime } from "@/utils/index"
import { useRouter } from "vue-router"
import router from "@/router"

let routeRHook = useRouter() // 当

let tableDataRule = localStorage.getItem("tableDataRule")
let rowTable = localStorage.getItem("rowTable")
let rowTableName = localStorage.getItem("rowTableName")

console.log(tableDataRule, rowTable, rowTableName, "---rowTableName--")

let tableRow = reactive({
  tableDataRule: [], // 表格标题配置
  rowTable: {} // 表格数据
})

if (tableDataRule) {
  tableRow.tableDataRule = JSON.parse(tableDataRule)
  tableRow.rowTable = JSON.parse(rowTable)
}

// 筛选配置显示
const filSelectFn = (val: string, list: any[]) => {
  if (val == undefined || !list) {
    return ""
  }
  let str = ""
  for (let i = 0; i < list.length; i++) {
    let it = list[i]
    if (it.value == val) {
      str = it.label
      break
    }
  }
  return str
}

/**查看文件*/
const showFileFn = (it: any, name: string, filename?: string) => {
  console.log(it, "showFileFn", name)
  localStorage.setItem("tabFil", JSON.stringify(it))
  localStorage.setItem("tabFilname", name)
  localStorage.setItem("tabFilname_name", filename || "")
  router.push({
    path: "/filebox"
  })
}
</script>
<template>
  <div class="boxtab">
    <el-descriptions :title="rowTableName || '详情'" border :direction="'vertical'" :column="3">
      <el-descriptions-item v-for="(item, i) in tableRow.tableDataRule" :key="i" :label="item.label" align="left">
        <template v-if="item.type && item.type == 'time'">
          {{ formatDateTime(tableRow.rowTable[item.prop]) }}
        </template>
        <template v-else-if="item.type && item.type == 'select'">
          {{ filSelectFn(tableRow.rowTable[item.prop], item.list) }}
        </template>
        <template v-else-if="item.type && item.type == 'file'">
          <el-tooltip class="box-item" effect="dark" :content="'点击预览文件'" placement="top">
            <div @click="showFileFn(tableRow.rowTable, item.prop)" style="text-decoration: underline; cursor: pointer">
              {{ tableRow.rowTable[item.prop] }}
            </div>
          </el-tooltip>
        </template>
        <template v-else-if="item.type && item.type == 'filename'">
          <el-tooltip class="box-item" effect="dark" :content="'点击预览文件'" placement="top">
            <div
              @click="showFileFn(tableRow.rowTable, item.assoc, tableRow.rowTable[item.prop])"
              style="text-decoration: underline; cursor: pointer"
            >
              {{ tableRow.rowTable[item.prop] }}
            </div>
          </el-tooltip>
        </template>
        <template v-else>
          {{ tableRow.rowTable[item.prop] }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<style scoped>
.boxtab {
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  height: 100%;
}
</style>
